<template>
  <div class="editClock">
    <yd-navbar class="recommend-navbar" height="0.96rem" bgcolor="#41CB47">
        <router-link to="/my" slot="left">
          <yd-navbar-back-icon class="indexheader-font" color="#fff">{{title}}</yd-navbar-back-icon>
      </router-link>
      <span slot="right" style="color: #fff;" class="more" @click="open">
          新增
      </span>
    </yd-navbar>
    <yd-checklist class="clockList" align="right" v-model="checklist">
        <yd-checklist-item class="clockitem" v-for="item,i in clockList" :val="item.value" :key="i">
            <div class="clockCon">{{item.time}}</div>
        </yd-checklist-item>
    </yd-checklist>
    <yd-button class="nextBtn" size="large" type="primary" @click.native="finishBtn">完成</yd-button>
    <yd-button class="delBtn" bgcolor="#f1f1f1" size="large" type="primary" @click.native="delBtn">删除</yd-button>
    <yd-datetime type="time" v-show="false" ref="datetime" v-model="datetime" :callback="setTime" slot="right"></yd-datetime>
  </div>
</template>

<script>
import textHeader from "../components/TextHeader";
import noiseImg from "../assets/noise.gif";
import URL from "../until/urlConfig.js";
import until from "../until/until.js";
import md5 from 'js-md5';
export default {
  name:'editClock',
  components: {
    textHeader
  },
  data() {
    return {
      checklist:[],
      title:'设置提醒',
      datetime:'',
      clockList:[
        {
          time:'06:00',
          value:1
        },
        {
          time:'07:00',
          value:2
        },
        {
          time:'08:00',
          value:3
        },
        {
          time:'09:00',
          value:4
        }
      ]
    };
  },
  methods: {
    selectRecord(id){
      if(this.selectedRecord.indexOf(id)>=0){
        this.selectedRecord.splice(this.selectedRecord.indexOf(id),1);
      }else{
        this.selectedRecord.push(id);
      }
    },
    nextBtn(){

    },
    getIllnessList(){
      this.$http.get(URL.getIllnessList)
      .then(res=>{
        this.recordList = res.data;
      })
    },
    open() {
      this.$refs.datetime.open();
    },
    setTime(){
      // console.log(this.datetime);
      this.clockList.push({time:this.datetime,value:8})
    },
    finishBtn(){
      console.log(this.checklist);
    },
    delBtn(){
      console.log(this.checklist);
    }
  },
  created() {},
  mounted() {
    // this.getIllnessList();
  }
};
</script>
<style lang="scss">
@import "../style/public.scss";
.editClock{
  height:100%;
  background:#f1f1f1;
  .clockList{
    padding:0 rem(20);
    .clockitem{
      padding:0;
      margin:0;
      border-bottom:rem(2) solid #f1f1f1;
      text-align:left;
      .clockCon{
        height:rem(76);
        line-height:rem(76);
        font-size:rem(28);
        color:#7c867c;
      }
      .yd-checklist-item-icon{
        padding-right:0;
        .yd-checklist-icon{
          width:rem(30);
          height:rem(30);
          border-radius:0;
          i{
            width:rem(8);
            height:rem(16);
            border:rem(2) solid #fff;
            border-left:0;
            border-top:0;
          }
        }
      }
    }
  }
  .nextBtn{
    font-family:'Microsoft Yahei';
    width:calc(100% - 0.4rem);
    margin:rem(66) auto 0;
    font-size:rem(32);
    height:rem(76);
    color:#fff;
    line-height:rem(76);
    font-weight:100;
  }
  .delBtn{
    font-family:'Microsoft Yahei';
    width:calc(100% - 0.4rem);
    margin:rem(29) auto 0;
    font-size:rem(32);
    height:rem(76);
    color:#cfcfcf;
    line-height:rem(76);
    border:rem(2) solid #cfcfcf;
    font-weight:100;
  }
}

</style>